<template>
    <div>
       <el-form :inline="true" :model="formInline" class="demo-form-inline">

            <el-form-item label="系统(模块)">
                <el-select v-model="formInline.moduleName" placeholder="请选择">
                    <el-option label="访问控制中心" value="moduleName[0]"></el-option>
                    <el-option label="环节分析系统" value="moduleName[2]"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="操作对象">
                <el-input v-model="formInline.operand" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="详情">
                <el-input v-model="formInline.details" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="功能">
                <el-input v-model="formInline.functionalName" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="子功能">
                <el-input v-model="formInline.subFunctionalName" placeholder="请输入"></el-input>
            </el-form-item>
            <div class="block">
                <el-date-picker
                        v-model="formInline.time"
                        type="datetimerange"
                        :picker-options="pickerOptions"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        align="right">
                </el-date-picker>
            </div>
            <el-form-item label="登录名">
                <el-input v-model="formInline.loginName" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="moduleName"
                    label="系统(模块)"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="functionalName"
                    label="功能"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="operand"
                    label="操作对象"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="subFunctionalName"
                    label="子功能"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="details"
                    label="详情"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="logType"
                    label="日志类型"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="loginName"
                    label="登录名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="display"
                    label="显示名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="operation"
                    label="操作ip"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="time"
                    label="时间"
                    width="120">
            </el-table-column>
        </el-table>


        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="formInline.pageNum"
                :page-sizes="[3, 6, 9, 12]"
                :page-size="formInline.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="formInline.total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [],
                multipleSelection: [],
                formInline: {
                    moduleName:'',
                    functionalName:'',
                    operand:'',
                    subFunctionalName:'',
                    details:'',
                    loginName:'',
                    time:'',
                    pageNum:1,
                    pageSize:3,
                    total:0,
                },
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
                value2: ''
            }

        },
        methods: {
            list(){
                this.axios.get("http://localhost:8081/module/list",{params:this.formInline}).then(res=>{
                    console.log("11111111"+res);
                    this.tableData=res.data.data.list;
                    this.formInline.total=res.data.data.total;
                })
            },
            onSubmit() {
                this.list();
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.formInline.pageSize=val;
                this.list();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.formInline.pageNum=val;
                this.list();
            },

        },
        created(){
            this.list();
        }
    }
</script>

<style scoped>

</style>